<template>
	<view >
		<view>
			
			<block >




				<view class="bg_1">

				</view>
				<view class="search search_mp"
					:style="{ height: menuButtonHeight, top: menuButtonTop, width: menuButtonleft }">
					<view class="search_mp_name">发现</view>
					<view class="left" @tap="goSearch">
						<!-- <image :src="imgUrl + 'svideo/search_icon.png'" mode="aspectFit"></image> -->
						<text>{{ ('请输入关键词') }}</text>
					</view>
				</view>





				
			
			
				<view class="nav" v-if="labelList.length" :style="{ top: 'calc(80rpx + ' + statusBarHeight + ')' }">
					<view class="nav_mine">
						<view v-for="(item, index) in labelList" :key="index"
							:class="'nav_item ' + (curLabelId == item.labelId ? 'on' : '')" @tap="changeLabel"
							:data-id="item.labelId">
							<text>{{ item.labelName }}</text>
							<text class="bottom_line" style="background-color: #fff"></text>
						</view>
					</view>
					
					
				</view>
                 
				<scroll-view :scroll-y="labelList.length > 0" class="live_list" v-if="labelList.length"
					:style="{ top: 'calc(210rpx + ' + statusBarHeight + ')' }">
					
				</scroll-view>
				
				
			</block>
		</view>
	</view>
</template>

<script>
	
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		
		data() {
			return {
				labelList: [],
				//标签列表
				videoList: [],
				//短视频列表
				themeList: [],
				//主题列表
				curLabelId: '',
				//当前选中的标签id
				// imgUrl: getApp().globalData.imgUrl,
				//图片地址
				hasmore: true,
				//是否还有数据，用于页面展示
				loading: false,
				bgStyle: 'background-size:cover;background-position:center center;background-repeat: no-repeat;',
				//背景图片样式
				firstLoading: true,
				//是否初次加载，是的话展示页面居中的loading效果，
				author_id: 0,
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
				// #ifdef MP
				statusBarHeight:Number(uni.getSystemInfoSync().statusBarHeight)+ 40+ 'px',
				// #endif
				//#ifdef MP
				menuButtonHeight: uni.getMenuButtonBoundingClientRect().height + 'px',
				menuButtonTop: uni.getMenuButtonBoundingClientRect().top + 'px',
				menuButtonleft: uni.getMenuButtonBoundingClientRect().left + 'px',
				//#endif
				//作者id
				key: '',
				//登录的key值
				member_avatar: '', //默认作者头像
				pageSize: 10,
				current: 1,
				bottomSateArea: getApp().globalData.bottomSateArea, //iphone手机底部一条黑线的高度
				ifshow: false,
				showEmpty: false,
				openState: true,
				showmyvideo:false,//我的视频按钮显示,
				annunciatetext:'本平台严禁出现违法违规、色情低俗、吸烟酗酒、人身伤害等内容。观看过程中，请谨慎判断，以防人身财产损失。请大家注意财产安全，理性消费，谨防网络诈骗。'
			}
		},
		computed: {
			...mapState(['hasLogin', 'cartData', 'userInfo','userCenterData'])
		},
		props: {},
		//是否还有数据

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad:  async function(options) {
			
		},
		onShow() {
			
		},
		onHide() {
			this.ifshow = true
		},
		onReachBottom() {
			if (this.hasmore) {
				this.getVideoList()
			}
		},

		onPullDownRefresh() {
			this.current == 1
			this.getVideoList()
			this.getisshowmyvideo()
		},

		methods: {
			// 是否展示我的视频
			getisshowmyvideo(){
				this.$request({
					url:'v3/seller/front/vendor/roles',
					method:"GET",
					data:{vendorMobile:this.userCenterData.memberMobile}
				}).then(res=>{
					if(res.msg==2 || res.msg==3){
						 
						this.showmyvideo=true
					}else{
						this.showmyvideo=false
					}
				})
				
			},
			// 获取短视频分类
			getLabelList() {
				let {
					curLabelId,
					firstLoading
				} = this
				let param = {}
				param.data = {}
				param.url = 'v3/video/front/video/list'
				param.method = 'GET'
				this.$request(param).then((res) => {
					console.log(res,'短视');
					if (res.state == 200) {
						this.openState = true
						this.labelList = res.data.labelList
						this.member_avatar = res.data.memberAvatar
						if (this.labelList.length) {
							this.curLabelId = this.labelList[0].labelId
							this.getVideoList()
						}
						if (firstLoading) {
							firstLoading = false
						}
						this.firstLoading = firstLoading
					} else if (res.state == 258) {
						this.openState = false
					}
				})
			},

			//获取短视频列表
			getVideoList() {
				this.loading = true
				let {
					videoList,
					hasmore,
					firstLoading,
					themeList
				} = this
				let param = {}
				param.data = {}
				param.data.pageSize = this.pageSize
				param.data.current = this.current
				param.data.labelId = this.curLabelId
				param.url = 'v3/video/front/video/list'
				param.method = 'GET'
				this.$request(param).then((res) => {
					uni.stopPullDownRefresh()
					if (res.state == 200) {
						if (this.current == 1) {
							videoList = res.data.videoList
							themeList = res.data.themeList
						} else {
							videoList = videoList.concat(res.data.videoList)
						}
						if (checkPageHasMore(res.data.pagination)) {
							this.current++
						} else {
							this.hasmore = false
							hasmore = false
						}
					} //初次加载的话更改状

					if (firstLoading) {
						firstLoading = false
					}

					this.loading = false
					this.hasmore = hasmore
					this.videoList = videoList
					this.firstLoading = firstLoading
					this.themeList = themeList
					if (this.videoList.length == 0) {
						this.showEmpty = true
					} else {
						this.showEmpty = false
					}
				})
			},

			//标签点击事件
			changeLabel(e) {
				 
				let id = e.currentTarget.dataset.id
				let {
					curLabelId
				} = this
				if (curLabelId == id) return
				this.curLabelId = id
				this.firstLoading = true
				this.videoList = []
				this.current = 1
				this.hasmore = true
				if(id==10){
					this.annunciatetext='本平台严禁出现违法违规、色情低俗、吸烟酗酒、人身伤害等内容。观看过程中，请谨慎判断，以防人身财产损失。请大家注意财产安全，理性消费，谨防网络诈骗。'
				}else{
						this.annunciatetext='本平台严禁出现违法违规、色情低俗、吸烟酗酒、人身伤害等内容。观看过程中，请谨慎判断，以防人身财产损失。请大家注意财产安全，理性消费，谨防网络诈骗。'
				}
				this.getVideoList(id)
			},

			//跳转搜索页面
			goSearch: function() {
				this.$Router.push('/extra/svideo/svideoSearch')
			},

			//进入推荐主题页面
			goRecTopic(e) {
				let tmp_data = e.currentTarget.dataset
				this.$Router.push({
					path: '/extra/svideo/svideoRecTopic',
					query: {
						theme_id: tmp_data.themeid,
						title: tmp_data.themename
					}
				})
			},

			//进入直播个人中心
			goLiveUserCenter(e) {
				var curTab = e.currentTarget.dataset.curtab

				if (!this.hasLogin) {
					getApp().globalData.goLogin(this.$Route)
				} else {
					this.$Router.push('/extra/user/my')
				}
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #f8f8f8;
		width: 750rpx;
		margin: 0 auto;
		position: relative;
		height: 100%;
	}

	.nav {
		position: fixed;
		top: 80rpx;
		left: 0;
		width: 750rpx;
		height: 84rpx;
		background-color: 'transpanrent';
		display: block;
		white-space: nowrap;
		overflow: hidden;
		z-index: 99;
		right: 0;
		margin: 0 auto;
	}
   .annunciate{
	   height: 30rpx;
	   position: fixed;
	   top: 170rpx;
	   /* #ifdef MP */
	   top: 160rpx;
	   /* #endif */
	   left: 30rpx;
	  width: 700rpx;
 
   }
	.empty_h {
		/* height: 170rpx; */
		width: 100%;
		background-color: 'transpanrent';
	}

	.search {
		position: fixed;
		/* #ifdef H5 */
		top: 100rpx;
		/* #endif */
		/* #ifdef MP || APP-PLUS */
		top: 20rpx;
		/* #endif */
		left: 0;
		right: 0;
		width: 710rpx;
		height: 60rpx;
		display: flex;
		flex-direction: row;
		/* #ifndef MP */
		justify-content: space-between;

		margin: 20rpx 20rpx 0 20rpx;
		margin: 0 auto;
		/* #endif */
		align-items: center;
		// background: transpanrent;
		background: red;

		image {
			width: 17rpx;
			height: 29rpx;

		}
	}

	.search_mp {
		padding: 0 25rpx;
	}

	.search_mp .search_mp_name {
		width: 95rpx;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		margin-right: 20rpx;
		text-align: center;
	}

	.search .left {
		width: 639rpx;
		height: 60rpx;
		border-radius: 30rpx;
		background: rgba(255, 255, 255, 0.2);
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.search_mp .left {
		width: auto;
		flex: 1;
		height: 100%;
	}

	.search .left image {
		width: 50rpx;
		height: 50rpx;
		margin-top: 2rpx;
		margin-left: 10rpx;
	}

	.search .left text {
		color: #fff;
		font-size: 24rpx;
		margin-top: -2rpx;
	}

	.search .search_text {
		font-size: 26rpx;
		color: #fff;
	}

	.nav_item {
		display: inline-block;
		line-height: 74rpx;
		text-align: center;
		color: #fff;
		font-size: 28rpx;
		padding: 0 25rpx;
		font-weight: 600;
	}

	.nav_item.on text {
		display: inline-block;
		line-height: 74rpx;
		/* border-bottom: 4rpx solid #fff; */
		font-weight: 700;
	}

	.nav_item.on text:nth-child(2) {
		display: block;
		width: 58rpx;
		height: 2rpx;
		background: #fff;
		z-index: 1000;
		border: 4rpx solid #fff;
		border-radius: 40rpx;
		line-height: unset;
		margin: 0 auto;
	}

	.bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 468rpx;
		z-index: 0;
		right: 0;
		margin: 0 auto;
	}

	.bg_1 {
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 530rpx;
		z-index: 0;
		right: 0;
		margin: 0 auto;
		background: var(--color_video_main_vertical_bg);
	}

	.live_list {
		width: 750rpx;
		/* #ifdef H5 */
		height: calc(100vh - 273rpx);
		/* #endif */
		/* #ifdef MP || APP-PLUS */
		height: calc(100vh - 259rpx);
		/* #endif */


		position: fixed;
		top: 210rpx;
		left: 0;
		right: 0;
		bottom: 0;
		margin: 0 auto;
	}

	.rec_svideo {
		width: 750rpx;
		height: 345rpx;
		margin-bottom: 20rpx;
		margin-top: 20rpx;
	}

	.rec_svideo swiper-item {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.rec_svideo swiper-item .rec_img {
		width: 710rpx;
		height: 345rpx;
		border-radius: 15rpx;
	}

	.personal_homepage {
		width: 150rpx;
		height: 80rpx;
		background: var(--color_video_main_bg);
		border-radius: 40rpx 0 0 40rpx;
		display: flex;
		align-items: center;
		position: fixed;
		right: 0;
		bottom: 208rpx;
		z-index: 10;
		padding: 0 20rpx 0 8rpx;
		box-sizing: border-box;
	}

	.personal_avator {
		width: 64rpx;
		height: 60rpx;
		border-radius: 50%;
		margin-right: 8rpx;
		background: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.personal_avator image {
		width: 64rpx;
		height: 60rpx;
		border-radius: 50%;
	}

	.my_video {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
		line-height: 30rpx;
	}

	/* #ifdef H5 */
	.nav {
		top: 168rpx;
	}

	.search {
		top: 88rpx;
	}

	.live_list {
		top: 268rpx;
	}

	/* #endif */
	.nav {
		overflow-y: hidden;
	}

	.nav_mine {
		margin-left: 34%;
		overflow-x: scroll;
		box-sizing: border-box;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		/* padding-bottom: 25px; */
	}

	.nav_mine::-webkit-scrollbar {
		display: none;
	}

	/* #ifdef APP-PLUS */
	.empty_label {
		position: absolute;
		top: 30%;
	}

	/* #endif */

	/* #ifdef H5 */
	.empty_label {
		position: absolute;
		top: 20%;
	}

	/* #endif */

	/* #ifdef MP-WEIXIN */
	.empty_label {
		position: absolute;
		top: 30%;
	}

	/* #endif */
</style>